section, footer, nav {
    display: block;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    -webkit-text-size-adjust: none;
    color: #333;
}

a {
    color: blue;
    color: hsl( 220, 90%, 40% );
    text-decoration: none;
}

a:hover {
    background-color: blue;
    background-color: hsl( 220, 90%, 50% );
    color: white;
}

#options {
    position: relative;
    z-index: 100;
    margin-bottom: 40px;
}

button {
    font-size: 16px;
    -webkit-appearance: push-button;
}

footer {
    border-top: 1px solid #CCC;
    font-size: 0.8em;
    position: relative;
    z-index: 100;
}

#disclaimer {
    color: red;
    font-weight: bold;
    display: none;
}
.no-csstransforms3d #disclaimer { display: block; }

hr {
    border: none;
    border-top: 1px solid #CCC;
}

figure {
    margin: 0;
}

code {
    font-family: 'Monaco', 'Menlo', monospace;
}

/* index navigation */

.index nav ul {
    list-style: none;
    margin: 0 0 3.0em 0;
    padding: 0;
}

.index nav ul a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    padding: 10px;
    border: 1px solid #CCC;
    border-bottom: none;
}

.index nav ul li:first-child a {
    border-radius: 10px 10px 0 0;
}

.index nav ul li:last-child a {
    border-radius: 0 0 10px 10px;
    border-bottom: 1px solid #CCC;
}

/**** Docs ****/

body.doc {
    max-width: 640px;
}

.doc #content {
    font-size: 14px;  
    line-height: 1.5em;
}

.doc #content blockquote {
    margin-left: 0;
    padding: 0.8em;
    background: #EEE;
    background: hsla( 0, 0%, 0%, 0.04 );
}

.doc #content img {
    border: 1px solid #CCC;
    display: inline-block;
}

.doc #content pre {
    font-size: 12px;
    line-height: 1.5em;
}

.doc nav h1 {
    font-size: 20px;
}

.doc nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc nav li a {
    display: block;
    padding: 0.3em 0;
}

.doc nav li.current a {
    font-weight: bold;
    color: #333;
}
.doc nav li.current a:hover { color: white; }

@media screen and (min-width: 768px) {

    body.doc {
        margin-left: 220px;
    }

    .doc nav {
        width: 200px;
        position: fixed;
        left: 10px;
        font-size: 14px;
    }

    .doc nav h1 {
        margin-top: 0;
    }

}

/* proxy range */

.proxy-range {
    display: inline-block;
    position: relative;
    height: 30px;
    width: 200px;
    border: 1px solid hsla( 0, 0%, 0%, 0.15 );
    background-color: hsla( 0, 0%, 0%, 0.02 );
    border-radius: 15px;
    -webkit-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
    -moz-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
    -o-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
    box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );

}

.proxy-range.highlighted {
    background-color: hsla( 220, 90%, 50%, 0.15 );
}

.proxy-range .handle {
    width: 38px;
    height: 38px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid hsla(0, 0%, 0%, 0.3);
    position: absolute;
    top: -5px;
    left: -20px;
    background-color: hsla( 220, 70%, 60%, 1.0 );
    background-image: -webkit-gradient(radial, center 15%, 0, center 30%, 30, 
        from(            hsla( 0, 0%, 100%, 0.6 ) ),  
        color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
        color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
        to(              hsla( 0, 0%,   0%, 0.5 ) )
        );
    background-image: -moz-radial-gradient(center 30%, cover,
        hsla( 0, 0%, 100%, 0.5 ),  
        hsla( 0, 0%, 100%, 0.0 ) 50%,
        hsla( 0, 0%,   0%, 0.0 ) 50%,
        hsla( 0, 0%,   0%, 0.5 )
        );
    -webkit-box-shadow: 
        0  2px 0px -1px hsla( 0, 0%, 100%, 1.0 ) inset, 
        0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
        0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
        ;
    -moz-box-shadow: 
        0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
        0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
        0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
        ;
    box-shadow: 
        0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
        0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
        0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
        ;
    -webkit-transition-property: width, height, top, left, -webkit-border-radius;
    -moz-transition-property: width, height, top, left, -moz-border-radius;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
}

.proxy-range.highlighted .handle {
    height: 98px;
    top: -35px;
    width: 4px;
    left: -3px;
    background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
        from(            hsla( 0, 0%, 100%, 0.6 ) ),  
        color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
        color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
        to(              hsla( 0, 0%,   0%, 0.5 ) )
        );
    border-radius: 3px;
}




/******* Pygments *******/



pre {
    background: #111;
    color: white;
    padding: 0.8em;
    white-space: pre-wrap;
}


code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp { color: #5298D4; } /* doctype */
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */
